<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>

</head>
<body>
<header class="aui-bar aui-bar-nav header">
  <a class="aui-pull-left">
      <span class="aui-iconfont aui-icon-left" onclick="api.closeWin()"></span>
  </a>
    <div class="aui-title">用户列表</div>
    <a class="aui-pull-right aui-btn">
        <span class="fa fa-user-circle-o"></span>
    </a>
</header>
<div class="header-d"></div>

<div id="list">
</div>

<!-- 用户列表 -->
<script type='text/template' id='template'>
  {{~it :value:index}}
<div class="user">
     <ul class="aui-list aui-list-in">
        <li class="aui-list-item aui-list-item-middle">
            <div class="aui-list-item-inner aui-list-item-arrow">
              <div class="aui-list-item-title">{{=value}}</div>
            </div>
        </li>
    </ul>
</div>
{{~}}
</script>

</body>
<script type="text/javascript" src="./script/api.js"></script>

</html>


<script>

   apiready = function() {
    var data =  $api.getStorage('user');
    var dotFn = doT.template(template.innerHTML);
    var html = dotFn(data);
    var list = $api.byId('list');
    $api.html(list, html);

   }

</script>
